<template>
  <div class="TemplateMsgSmsRecord">
    <!-- 条件 -->
    <div class="serch_box">
      <div class="demo-input-suffix">
        搜索：
        <el-input v-model="serchInput" placeholder="输入机构名称/编号筛选" />
      </div>
      <div class="demo-input-suffix">
        发送时间：
        <el-date-picker v-model="sendTime" type="daterange" value-format="yyyy-MM-dd" range-separator=" - " start-placeholder="开始日期" end-placeholder="结束日期" />
      </div>
      <div class="demo-input-suffix">
        发送状态：
        <el-select v-model="sendState" placeholder="发送状态"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /></el-select>
      </div>

      <el-button type="primary" icon="el-icon-search" @click="serchBtn">搜索</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="resetBtn">清空</el-button>
    </div>

    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%; margin-top: 50px;"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="instCode" label="机构编号" />
      <el-table-column prop="instName" label="机构名称" />
      <el-table-column prop="sendName" label="发送对象">
        <template slot-scope="scope">
          <div>{{ scope.row.sendName.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="tempContent" label="短信内容" width="350" />
      <el-table-column prop="sendTime" label="发送时间" />
      <el-table-column prop="sendState" label="发送状态" />
    </el-table>

    <el-pagination
      style="margin-top: 10px "
      background
      :current-page.sync="pageNum"
      :page-size.sync="pageSize"
      layout="total, prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getSemRecord } from '@/api/smsTemplate'
export default {
  data() {
    return {
      // 搜索条件
      serchInput: '',
      sendTime: '',
      pageNum: 1,
      pageSize: 10,
      total: 0,

      options: [
        {
          value: 1,
          label: '发送中'
        },
        {
          value: 2,
          label: '发送成功'
        },
        {
          value: 3,
          label: '发送失败'
        }
      ],
      sendState: '',

      // 表格
      loading: false,
      tableData: [
        {
          instCode: '',
          instName: '',
          sendName: '',
          tempContent: '',
          sendTime: '',
          sendState: ''
        }
      ]
    }
  },
  mounted() {
    this.getSemRecordFun()
  },

  methods: {
    serchBtn() {
      this.getSemRecordFun()
    },
    resetBtn() {
      this.serchInput = ''
      this.sendTime = ''
      this.sendState = ''
      this.getSemRecordFun()
    },

    // 分页
    handleCurrentChange() {
      this.getSemRecordFun()
    },

    // 获取短信记录
    getSemRecordFun() {
      this.loading = true
      const prams = {
        deptName: this.serchInput,
        beginDay: this.sendTime[0],
        endDay: this.sendTime[1],
        sendStatus: this.sendState,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      getSemRecord(prams)
        .then(res => {
          this.tableData = []
          this.loading = false
          console.log('获取短信记录', res)
          const data = res.data.list
          this.total = res.data.total
          data.forEach(el => {
            const list = {
              instCode: el.deptNo,
              instName: el.deptName,
              sendName: el.userName,
              tempContent: el.content,
              sendTime: el.sendTime,
              sendState: el.sendStatus == 1 ? '发送中' : el.sendStatus == 2 ? '发送成功' : '发送失败'
            }
            this.tableData.push(list)
          })
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.TemplateMsgSmsRecord {
	background-color: white;
	padding: 20px;
	// 条件
	.serch_box {
		width: 100%;
		overflow: hidden;

		.demo-input-suffix {
			margin-right: 20px;
			margin-bottom: 10px;
			float: left;
			.el-input {
				width: 250px;
				margin-right: 20px;
			}
		}
	}
	// 操作
	.operation_box {
		margin: 50px 0 20px 0;
		.el-button {
			margin-left: 8px;
		}
	}
}
</style>
